<template>
	<view class="content">

		<view class="sm">
			<three ref="three"></three>
		</view>
		<view class="start" @tap="start">
			<text>开 始</text>
		</view>
		<view class="start" @tap="startTo">
			<text>重开</text>
		</view>
	</view>
</template>

<script>
	import three from '../components/three.vue'
	export default {
		components: {
			three,
		},
		data() {
			return {

			}
		},
		onLoad() {
			this.getHeight()
		},
		methods: {
			getHeight(){
				const query = uni.createSelectorQuery().in(three);
				query.select('#id').boundingClientRect(data => {
				  ////console.log("得到布局位置信息" + JSON.stringify(data));
				  ////console.log("节点离页面顶部的距离为" + data.top);
				}).exec();
			},
			start() {
				////console.log('点击开始了')
				this.$refs.three.start()
			},
			startTo() {
				this.$refs.three.translateX = [0,0,0]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(to top, #8F1E70, #51279A);
		min-height: calc(100vh - var(--window-bottom) - var(--window-top));
		padding: 0 30rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.sm {
			margin-top: 20rpx;
		}

		.start {
			width: 70%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f29c11;
			border-radius: 40rpx;
			margin-top: 30rpx;
			box-shadow: 0 1px 2px rgba($color: #51279A, $alpha: 1);
			border-bottom: solid 3px #8d5805;
			box-sizing: border-box;

			text {
				font-size: 20px;
				font-weight: bold;
				color: #b51c06;
				text-shadow: 1px 1px 1px #f2e811;
			}
		}
	}
</style>
